<template>
  <view>
    <view class="cu-list grid col-4 no-border text-black">
      <view class="cu-item c-center" @tap.stop="redirectPage(item.url)" v-for="(item, index) in elements" :key="item.idx">
<!--        <view :class="'cuIcon-' + item.cuIcon + ' text-' + item.title + ' text-shadow'" style="font-size: 56rpx">-->
<!--          <view class="cu-tag badge" v-if="item.badge != 0">-->
<!--            <block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>-->
<!--          </view>-->
<!--        </view>-->
        <img class="item-img" :src="item.img"/>

        <text>{{ item.title }}</text>
      </view>
    </view>

<!--    <view class="nav-list" style="padding-top: 10rpx">-->
<!--      <view hover-class="none" class="nav-li text-custom-bg text-white" navigateTo-->
<!--            :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements"-->
<!--            :key="index"-->
<!--            @tap.stop="redirectPage(item.url)"-->
<!--      >-->
<!--        <view class="nav-title">{{ item.title }}</view>-->
<!--        <view class="nav-name">{{ item.name }}</view>-->
<!--        <text :class="'cuIcon-' + item.cuIcon"></text>-->
<!--      </view>-->
<!--    </view>-->
  </view>
</template>

<script setup lang="ts">
import {onMounted, computed, reactive, ref} from 'vue'

const elements = reactive([
  // {title: '商户', name: 'Shop', color: 'cyan', cuIcon: 'shop', url: '/pages/shop/shopList'},
  // {title: '订单', name: 'Order', color: 'blue', cuIcon: 'goods', url:'/pages/order/VerifyOrderList?orderKey=1'},
  // {title: '团队', name: 'Team', color: 'purple', cuIcon: 'friend', url: '/pages/team/teamUser'},
  // {title: '核销', name: 'Cancel', color: 'purple', cuIcon: 'redpacket', url: '/pages/home/verifyOrderList'},
  {title: '线下门店', name: 'Shop', color: 'cyan', cuIcon: 'shop', img:'../../static/images/md.png', url: '/pages/shop/shopList'},
  {title: '扫码核销', name: 'server', color: 'blue', cuIcon: 'goods',img:'../../static/images/jx.png', url:'scanCode'},
  {title: '推广邀约', name: 'Team', color: 'purple', cuIcon: 'friend',img:'../../static/images/yy.png', url: '/pages/user/dyr'},
  {title: '签到积分', name: 'Cancel', color: 'purple', cuIcon: 'redpacket',img:'../../static/images/sc.png', url: '/pages/home/clock'},
]);

const redirectPage = (url) => {
  if (!url) {
    uni.showToast({
      title: '功能正在开发中,敬请期待',
      duration: 2000,
      icon: 'none'
    });
    return false;
  }
  
  if (url === 'scanCode') {
    // 允许从相机和相册扫码
    uni.scanCode({
      success: function (res) {
        console.log('条码类型：' + res.scanType);
        console.log('条码内容：' + res.result);
      }
    });

  } else {
    uni.navigateTo({
      url: url
    })
  }
}
</script>

<style>

.nav-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 40upx 0px;
  justify-content: space-between;
}

.nav-li {
  padding: 30upx;
  border-radius: 12upx;
  width: 45%;
  margin: 0 2.5% 40upx;
  /*background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);*/
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

.nav-li::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -10%;
  border-radius: 10upx;
  opacity: 0.2;
  transform: scale(0.9, 0.9);
}

.nav-li.cur {
  color: #fff;
  background: rgb(94, 185, 94);
  box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
}

.nav-title {
  font-size: 32upx;
  font-weight: 300;
}

.nav-title::first-letter {
  font-size: 40upx;
  margin-right: 4upx;
}

.nav-name {
  font-size: 28upx;
  text-transform: Capitalize;
  margin-top: 20upx;
  position: relative;
}

.nav-name::before {
  content: "";
  position: absolute;
  display: block;
  width: 40upx;
  height: 6upx;
  background: #fff;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.nav-name::after {
  content: "";
  position: absolute;
  display: block;
  width: 100upx;
  height: 1px;
  background: #fff;
  bottom: 0;
  right: 40upx;
  opacity: 0.3;
}

.nav-name::first-letter {
  font-weight: bold;
  font-size: 36upx;
  margin-right: 1px;
}

.nav-li text {
  position: absolute;
  right: 30upx;
  top: 30upx;
  font-size: 52upx;
  width: 60upx;
  height: 60upx;
  text-align: center;
  line-height: 60upx;
}

.text-light {
  font-weight: 300;
}

@keyframes show {
  0% {
    transform: translateY(-50px);
  }

  60% {
    transform: translateY(40upx);
  }

  100% {
    transform: translateY(0px);
  }
}

@-webkit-keyframes show {
  0% {
    transform: translateY(-50px);
  }

  60% {
    transform: translateY(40upx);
  }

  100% {
    transform: translateY(0px);
  }
}

.item-img{
  height:70rpx;
  width: 70rpx;
  margin-bottom:10rpx;
}

.c-center {
  align-items: center;
}
</style>
